<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

        <router-link  to="/dg"> 动画与路由同时使用 </router-link>
        <router-link  to="/du"> 多个路由或元素组件的过渡 </router-link>
      <div id="clk" >
      	<!--01-->
					<!--<transition  
							name="fade" 
							enter-active-class="active" 
							leave-active-class="leave"
							>
					  <div class="cp" v-show="show">
					  	 看动画路由的展示
					  </div>
					</transition>-->
					<!--02 使用animation库-->
					<transition  
							name="fade" 
							enter-active-class="animated bounceInDown" 
							leave-active-class="animated shake"
					>
					  <div class="cp" v-show="show">
					  	 看动画路由的展示
					  </div>
					</transition>
					
      </div>
     
      <div id="btn" @click="py($event)">
      	点击动画变化
      </div>
      
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '动画路由的展示',
      show:true
    }
  },
   methods:{
  	py(even){
  		console.log(222)
  		this.show=!this.show
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/
/*1.1进入动画的几种状态*/
/*.fade-enter {
  opacity:0;
}
.fade-leave-to{
  opacity:1;
}
.fade-enter-active{
  transition:opacity 5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity 5s;
}*/
/*cp fade-enter-active fade-enter-to
cp fade-leave-active fade-leave-to*/

/*1.2 transform 如何与@keyframes结合*/
 /*@keyframes  bu{
  0%{
  	transform: scale(0);
  }	
 50%{
  	transform: scale(1.5);
  }	
  100%{
  	transform: scale(1);
  }	
 }*/

/*1.3 transform 如何自定义动画名称 
 *           add==> enter-active-class="active" 
						 leave-active-class="leave" */

  #clk{
  	 width: 400px;
  	 height: 200px;
  	 border: 1px solid sandybrown;
  	 margin: 0  auto;
  	 .cp{
  	 	margin-top: 20px;
  	 	border: 1px solid darkgray;
  	 	width: 140px;
  	 	height: 30px;
  	 	line-height: 30px;
  	 	text-align: center;
  	  /*&.fade-enter,&.fade-leave-to{
				  opacity:0;
				}
			&.fade-enter-active,&.fade-leave-active{
				  transition:opacity 5s;
				}*/
				
				/*@keyframes  bu{
  0%{
  	transform: scale(0);
  }	
 50%{
  	transform: scale(1.5);
  }	
  100%{
  	transform: scale(1);
  }	
 }*/
				/*css3动画的运用*/
				/*&.fade-enter-active{
					transform-origin:left center; 
					animation: bu 3s ;
				}
				&.fade-leave-active{
					transform-origin:left center; 
					animation: bu 3s reverse;
				}*/
				
				
				/*1.3 transform 如何自定义动画名称*/
				/*&.active{
					transform-origin:left center; 
					animation: bu 3s ;
				}
				&.leave{
					transform-origin:left center; 
					animation: bu 3s reverse;
				}*/
				
				/*1.4 animation如何与项目结合*/

  	 }
  	 
  	
  }
  #btn{
  	  margin: 20px auto ; 
  	 	border: 1px solid darkgray;
  	 	width: 140px;
  	 	height: 30px;
  	 	line-height: 30px;
  	 	text-align: center;
  	 	
  	 	
  }

h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
